<template>
    <v-group
        ref="groupRef"
        v-for="wordInfo in configList"
        @click="emits('click', $event, wordInfo)"
    >
        <!-- 高亮区域 -->
        <v-rect
            v-for="cooridate in wordInfo.cooridates"
            :config="{
                x: cooridate.x,
                y: cooridate.y,
                width: cooridate.width,
                height: cooridate.height,
                fill: 'gba(0,0,0,1)',
                globalCompositeOperation: 'destination-out',
                opacity: wordInfo.isHighlight ? 1 : 0,
            }"
        ></v-rect>
        <v-rect
            v-for="cooridate in wordInfo.cooridates"
            :config="{
                x: cooridate.x - strokeWidth,
                y: cooridate.y - strokeWidth,
                width: cooridate.width + strokeWidth * 2,
                height: cooridate.height + strokeWidth * 2,
                stroke: '#FFB10B',
                strokeWidth: strokeWidth,
            }"
        ></v-rect>
    </v-group>
</template>
<script setup lang="ts">
import { Group } from "konva/lib/Group";
import { onMounted, ref } from "vue";

const props = defineProps<{
    configList: BaseMarkInfo[];
}>();
const emits = defineEmits<{
    click: [e: any, wordInfo: BaseMarkInfo];
}>();

const strokeWidth = 3;

const groupRef = ref<Group[]>();
onMounted(() => {
    groupRef.value?.forEach((gRef, gIndex) => {
        gRef.getNode().on("tap", (e: any) => {
            emits("click", e, props.configList[gIndex]);
        });
    });
});
</script>
<style lang="scss" scoped></style>
